@import '../../common//scss/base.scss';
@import '../../common/scss/animation.scss';
page {
  background-color: #FFF5EA;
  .relay-bg{
    padding:30rpx 20rpx 150rpx;
    position: relative;
  }
  .show-express {
    position:absolute;
    top:90rpx;
    right:20rpx;
    width:130rpx;
    height:46rpx;
    font-size:24rpx;
    color:#FCD5A5;
    background-color:#000000;
    text-align:right;
    border-top-left-radius: 100rpx;
    border-bottom-left-radius: 100rpx;
    z-index: 1;
    padding: 6rpx 10rpx 24rpx 6rpx;
    box-sizing: border-box;    
  }
  .body-relay {
    background-color:#ffffff;
    margin-top:2rpx;
    position:relative;
    border-radius:12rpx;
    width:710rpx;
    box-sizing:border-box;
    text-align:center;
    padding: 40rpx 0 66rpx;
    box-shadow: 0rpx 4rpx 28rpx 0rpx rgba(196,196,196,0.3);
    .show-center{
      text-align:center;
      .show-center-name{
        margin-bottom:28rpx;
        image {
          width: 56rpx;
          height: 56rpx;
          border-radius: 50%;
          vertical-align:middle;
        }
        text {
          font-size: 28rpx;
          margin-left: 10rpx;
        }
      }
      .show-center-time {
        display:flex;
        align-items:center;
        justify-content:center;
        margin-left: -20rpx;
        text{
          font-size:28rpx;
        }
        .is-over{
          font-size:34rpx;
          font-weight:900;
        }
        .time-num{
          width:48rpx;
          height:48rpx;
          background-color: #000000;
          border-radius:8rpx;
          color:#ffffff;
          margin:0 12rpx;
          display:inline-block;
          line-height:48rpx;
        }
        .ms {
          width: 30rpx;
          background-color: #FF5806;
        }
        .down-img{
          width: 30rpx;
          height: 48rpx;
          margin:0 12rpx;
          border-radius: 8rpx;
        }
      }
      .show-progress{
        padding:56rpx 200rpx;
        .circle-progress{
          width: 282rpx;
          height: 282rpx;
          border-radius: 50%;
          border: 46rpx solid  rgba(255,173,82, 0.2);
          line-height:282rpx;
          .had-money{
            text {
              &:first-child{
                font-size: 30rpx;
              }
              &:last-child{
                font-size: 32rpx;
                color: #F4601D;
              }
            }
          }
        }
      }
      .show-money-tip{
        font-size:28rpx;
        font-weight:400;
        margin-bottom:22rpx; 
        text {
          font-size: 44rpx;
          font-weight: 500;
          color: #E73111;
          padding: 0 4rpx;
          line-height: 60rpx;
        }
      }
      .share-btn{
        width: 630rpx;
        height: 100rpx;
        border-radius: 16rpx;
        margin: 0 38rpx;
        line-height: 100rpx;
        background:linear-gradient(270deg,rgba(250, 59, 59, 1) 0%,rgba(242,27,27,1) 100%);
        box-shadow: 0rpx 4rpx 18rpx 0rpx rgba(160, 9, 9, 0.31);
        font-size: 36rpx;
        color: #FFE5C0;
        font-weight:500;
        &::after{
          border: none;
        }
      }
      .center-tottom{
        font-size: 24rpx;
        color: #AEAEAE;
        margin-top: 30rpx;
      }
    }
  }
  .show-list{
    margin-top: 20rpx;
    background-color: #ffffff;
    padding:36rpx 22rpx;
    border-radius:12rpx;
    box-shadow: 0rpx 4rpx 28rpx 0rpx rgba(196,196,196,0.3);
    .list-title{ 
      font-size: 32rpx;
      font-weight: 500;
      text-align: center;
      padding-bottom: 30rpx;
      border-bottom:2rpx solid #f0f0f0;
      margin-bottom:10rpx;
    }
    .list-content{
      .list{
        display:flex;
        align-items:center;
        height:128rpx;
        image{
          width: 88rpx;
          height: 88rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        .list-text{
          display:flex;
          align-items:center;
          justify-content:space-between;
          width:562rpx;
          .list-name {
            font-size: 28rpx;
          }
          .list-status{
            font-size: 24rpx;
            color: #9E9E9E;
          }
          .list-num{
            font-size: 30rpx;
            color: #F03434;
            font-weight: 600;
            text {
              display:inline-block;
              width:75rpx;
              text-align:center;
            }
          }
        }
      }
    }
  }
  .no-friend{
    color: #9E9E9E;
    font-size: 28rpx;
    text-align: center;
    margin: 138rpx 0 156rpx;
  }
  .show-mask{
    position:fixed;
    top: 100rpx;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    box-sizing:border-box;
    width:630rpx;
    height:766rpx;
    border-radius:22rpx;
    z-index:99;
    text-align:center;
    background:linear-gradient(179deg,rgba(254,246,236,1) 0%,rgba(253,242,207,1) 100%);
    animation: zoomIn 0.5s;
    .mask-cont{
      position:absolute;
      top:0;
      box-sizing:border-box;
      padding:0 24rpx;
      width:100%;
      image{
        width:390rpx;
        height:277rpx;
        margin-top:-130rpx;
      }
    }
    @keyframes zoomIn {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
    
      50% {
        opacity: 1;
      }
    }
    .cancel-img{
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      font-size: 72rpx;
      color: #ffffff;
      bottom: -120rpx;      
    }
    .mask-title{
      font-size: 36rpx;
      margin-top: 50rpx;
      line-height: 50rpx;
      padding-bottom: 46rpx;
      border-bottom:2rpx solid rgba($color: #020202, $alpha: 0.1);
      text {
        color: #D51717;
      }
    }
    .mask-had-money{
      font-size: 36rpx;
      margin: 52rpx 0 12rpx;
    }
    .mask-money{
      color: #E02828;
      margin: 12rpx 0 34rpx;
      text {
        &:first-child {
          font-size: 32rpx;
          margin-right: 8rpx;
        }
        &:last-child {
          font-size: 66rpx;
          font-weight: 500;
          line-height: 92rpx;
        }
      }
    }
    .mask-detail{
      color: #686868;
      font-size: 24rpx;
    }
    .appli-for{
      width:584rpx;
      height:100rpx;
      line-height: 100rpx;
      font-weight: 500;
      background:linear-gradient(90deg,rgba(255,95,60,1) 0%,rgba(219,48,32,1) 100%);
      font-size: 32rpx;
      color: #FFC687;
      border-radius: 16rpx;
      margin-top: 34rpx;
    }
  }
  
  .van-popup{
    background-color: transparent!important;
  }
  .show-top-icon{
    background-color: #ffffff;
    border-radius: 26rpx;
    margin: 20rpx;
    .share-button{
      font-size: 24rpx;
      color: #000000;
      display:flex;
      justify-content:space-between;
      padding: 54rpx 170rpx 60rpx;
      text-align: center;
      font-weight: 500;
      .share-name{
        margin-top: 16rpx;
        font-weight: 400 !important;
      }
      button::after{
        border: none!important;
      }
      .button-hover {
        color: #000000!important;
      }
      .share-tap{
        border: none!important;
        font-size:24rpx;
        line-height: normal;
        background-color:transparent;
        margin:0;
        padding:0;
      }
      image{
        width: 88rpx;
        height: 88rpx;
      }
    }
  }
  .text-index{
    text-indent:26rpx;
  }
  .show-cancel{
    width: 710rpx;
    line-height: 114rpx;
    background-color: #ffffff;
    margin: 0 20rpx 30rpx;
    border-radius: 26rpx;
    text-align: center;
    color: #000000;
    font-size: 40rpx;
  }
  .show-cancel-an{
    margin-bottom: 98rpx!important;
  }

  // 进度条
  .progress_box{
    position: relative;
    width: 300rpx;
    height: 300rpx;  
    display: flex;  
    align-items: center;
    justify-content: center;
  }
  .progress_bg{
    position: absolute;
    width: 300rpx;
    height: 300rpx; 
  }
  .progress_canvas{ 
    width: 300rpx;
    height: 300rpx;
  } 
  .progress_text{ 
    position: absolute; 
    view {
      &:first-child {
        font-size: 48rpx;
        color: #E73111;
        text {
          font-size: 28rpx;
        }
      }
      &:last-child {
        margin-top: 2rpx;
        font-size: 24rpx;
        color: #848484;
      }
    }
  }
  .progress_info{   
    font-size: 36rpx;
    padding-left: 16rpx;
    letter-spacing: 2rpx
  } 
  .progress_dot{
    width:16rpx;
    height: 16rpx;  
    border-radius: 50%;
    background-color: #fb9126;
  }
}